<template>
  <div class="user-info">
    <el-form label-position="left" :model="form" :rules="ruleValidate" label-width="100px">
      <el-form-item label="用户头像" prop="head">
        <img src="@/project/assets/images/logo.jpg"/>
      </el-form-item>
      <el-form-item label="账户ID" prop="id">
        <el-input disabled v-model="form.agentRole.id" placeholder="请输入" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="账号认证" prop="phone">
        <el-input disabled v-model="form.agentRole.name" placeholder="请输入" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="用户昵称" prop="nickname">
        <el-input v-model="form.username" placeholder="请输入" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-select v-model="form.gender" placeholder="请选择">
          <el-option
            v-for="item in genderOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地区" prop="region">
        <el-cascader
          v-model="value"
          :options="regionList"
          :props="{ expandTrigger: 'hover' }"
          @change="handleChangeRegion">
        </el-cascader>
      </el-form-item>
      <el-form-item label="出生日期" prop="birthday">
        <el-date-picker
          v-model="form.birth"
          type="date"
          placeholder="选择出生年月"
          style="width:200px">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="简介" prop="introduction">
        <el-input
          type="textarea"
          :rows="3"
          placeholder="请输入"
          v-model.trim="form.introduction">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="btn" type="success" @click="save">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { update } from '@/project/service/manager'
import { getRegion } from '@/project/service/region'

export default {
  name: 'UserInfo',
  props: {
    userInfo: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      //表单校验规则
      ruleValidate: {},
      form:{},
      genderOptions:[{value: '男',label: '男'},{value: '女', label: '女'}],//性别选择器
      regionList: [],//地区列表
      value:[],//选中的地区
      regionId: 0,
    }
  },
  created(){
    this.form = this.userInfo
    this.form.agentRole.id = this.form.agentRole.id.toString()
    this.getRegion()
  },
  methods: {
    //获取全国地区
    getRegion(){
      getRegion({},data => {
        // console.log(data)
        this.regionList = this.handleRegion(data)
        // console.log(this.regionList)
        // 根据返回id获取初始地区省、市、区
        this.value = this.getRegionById(this.form.region.id)
        this.regionId = this.form.region.id
        // console.log(this.value)
      })
    },
    //遍历地区信息
    handleRegion(arr){
      let newArr = []
      arr.forEach(item => {
        let newArrItem = {
          label: item.name,
          value: item.name,
          id: item.id,
        }
        if(item.children && item.children.length>0){
          newArrItem.children = this.handleRegion(item.children)
        }
        newArr.push(newArrItem)
      })
      return newArr
    },
    //选择地理位置改变时触发
    handleChangeRegion(value) {
      // console.log(value);
      this.regionId = this.getRegionId(value)
      // console.log(this.regionId)
    },
    //通过选中地区内容返回对应地区id
    getRegionId(value){
      console.log(value)
      for(let item of this.regionList){
        if(item.value == value[0]) {
          if (item.children && item.children.length > 0) {
            for(let item2 of item.children){
              if (item2.value == value[1]){
                if (item2.children && item.children.length > 0) {
                  for(let item3 of item2.children){
                    if (item3.value == value[2]) {
                      return item3.id
                    }
                  }
                }else{
                  return item2.id
                }
              }
            }
          }else{
            return item.id
          }
        }
      }
    },
    //通过id获取地区
    getRegionById(id){
      console.log('id:'+id)
      for(let item of this.regionList){
        if(item.children && item.children.length>0){
          for(let item2 of item.children){
            if(item2.children && item2.children.length>0){
              for(let item3 of item2.children){
                if(item3.id == id){
                  return [item.value,item2.value,item3.value]
                }
              }
            }else{
              if(item2.id == id){
                return [item.value,item2.value]
              }
            }
          }
        }else{
          if(item.id == id){
            return [item.value]
          }
        }
      }
      // console.log(this.value)
    },
    //格式化时间
    formatTime(){
      let date = new Date(this.form.birth)
      let year = date.getFullYear()
      let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      return `${year}-${month}-${day}`
    },
    //保存
    save(){
      let birth = this.formatTime()
      let param = {
        agent:{
          username: this.form.nickname,
          gender: this.form.gender,
          region:{
            id: this.regionId,
          },
          birth: birth,
          introduction: this.form.introduction,
        }
      }
      // console.log("param:")
      // console.log(param)

      update(param,data => {
        // console.log(data)
        if(data == '204'){
          this.$message.success('保存成功')
        }
      })

    },
  },
}
</script>
<style lang="less" scoped>
.user-info {
  width: 100%;

  .el-form{
    margin-left:20px;

    .el-form-item{
      width:30%;
      margin-bottom: 15px;

      img{
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }

      /deep/ .el-form-item__label{
        width: 100px;
      }
    }
  }


  .btn{
    background: #00a16c;
    border: none;
    border-radius: 2px;
    //margin-left: 120px;
  }
}

</style>
